<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="css/base.css">
    <style>
        input[type='text'],input[type='password'],button{
            margin-top:20px;
            height: 25px;
        }
        .login_article{
            border-radius: 10px 25px 15px 20px;
            box-shadow: rgb(14, 233, 105) 10px 10px 5px;
            border:1px solid rgb(206, 197, 197);
            background-image: url(../dragon.jpg)url(../erfeng.jpg);
            position:absolute;
            top:0px;
            bottom: 0px;
            left:0px;
            right:0px;
            width:490px;
            height:200px;
            margin:auto;
        }
        .login_article_image{
            float: left;
            margin:20px;
        }
        #btn_login{
            margin-left:40px;
        }
        .errorMsg{
            margin-top:10px;
        }
        .qqq{
            height :130px;
            width: 140px;
        }
        .img_box{
            float:left;
            width: 21px;
            height: 45px;
            margin-top: -2px;           
            background-image: url(../3.jpg);
            background-position: -60px -180px;
        }
        .cookieSelect{
           margin-top:10px;
}
        #btn_cookieShow{
           margin-top:15px;
           margin-right: 48px;
           float: right;
           width:13px;
           height: 13px;
           border:1px solid #ccc;
           background-image: url(../4.jpg);
           background-position: -400px -450px;
}
    </style>
    <script>

            function init(){
        
                document.getElementById("btn_cookieShow").addEventListener("click",()=>{
        
                    let node=document.getElementsByClassName("cookieSelect")[0];        
                    if(node.hidden==true){        
                        node.hidden=false;        
                        document.getElementById("btn_cookieShow").classList.add("change");        
                    }else{
        
                        node.hidden=true; 
        
                        document.getElementById("btn_cookieShow").classList.remove("change");   
                    }
        
                },false);
        
            }
        
            window.addEventListener("load",init,false);
        
            </script>
</head>
<body>
   
    <article class="login_article">
    <aside class="img_box"></aside>
        <aside class="login_article_image">
            <img class="qqq" src="../erfeng.jpg" title ="logo">
            <div  class="errorMsg" style="color: greenyellow">用户名或密码错误！</div>
        </aside>  
        <section>
            <form action="" method="POST">
                用户名：<input type="text" name="userName"><br>
                密&nbsp;&nbsp;&nbsp;码：
                <input type="password" name="password"><br> 
                <button id="btn_login" type="submit">登录</button>         
                <div id="btn_cookieShow"></div>
                <div hidden class="cookieSelect">
                    <input type="checkbox" name="isCookie" value="yes">一周之内不需要登录
                </div>
                
            </form>
        </section>
    </article>
</body>
</html>